<template>
    <div class="wrap">
  <van-swipe @change="onChange">
        <van-swipe-item>
            <img src="//image1.ljcdn.com/crep/product/image/1594003305664-202007061041461236.jpg!m_fill,w_750,h_562,l_fbk,f_jpg,ls_50">
        </van-swipe-item>
        <van-swipe-item>
             <img src="//image1.ljcdn.com/crep/product/image/1594003337996-202007061042189601.jpg!m_fill,w_750,h_562,l_fbk,f_jpg,ls_50">
        </van-swipe-item>
        <van-swipe-item>
            <img src="//image1.ljcdn.com/crep/product/image/1557040567484-201905051515547662.jpg!m_fill,w_750,h_562,l_fbk,f_jpg,ls_50">
        </van-swipe-item>
        <van-swipe-item>
            <img src="//image1.ljcdn.com/crep/product/image/1594003279060-202007061041194189.jpg!m_fill,w_750,h_562,l_fbk,f_jpg,ls_50">
        </van-swipe-item>
          <template #indicator>
        <div class="custom-indicator">
             {{ current + 1 }}/4
        </div>
  </template>
</van-swipe>
    </div>
</template>

<script>
export default {
     data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
}
</script>

<style scoped>
.wrap img{
    width: 100%;
    height: 280px;
}
 .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>